<!DOCTYPE html>
<html>

<head>
    <!-- 3. 行内块元素和文字的对齐问题 -->
    <!-- 行内块元素会偏上 -->
    <meta charset="utf-8">
    <title>3. 行内块元素和文字的对齐问题</title>
    <style>
        .box {
            border: 1px solid red;
            font-size: 50px;

        }

        .item{
            width: 50px;
            height: 50px;
            background-color: palegreen;
            display: inline-block;
        }


    </style>
</head>

<body>
    <div class="box">
        abx中国xyz
        <div class="item"></div>

    </div>

    <p>一般这个行内块元素是一个图片</p>
    <p>它偏上是因为默认是基线对齐，所以行内块元素的下边缘与字母x的下边缘对齐</p>

</body>

</html>
